<template>
  <el-header class="my-designer-header">
    <div class="left-header">
      <el-tooltip class="toolTipHover" effect="dark" content="结构树" placement="bottom" trigger="hover">
          <span class="iconfont icon-jiazhihuabu" :class="selectedTree?'':'no-active'"
                @click.native="handleTreeChange"></span>
      </el-tooltip>
      <el-tooltip class="toolTipHover" content="组件" placement="bottom" trigger="hover">
          <span class="iconfont icon-sub-unit" :class="selectedLib?'':'no-active'"
                @click.native="handleLibChange"></span>
      </el-tooltip>

      <el-divider direction="vertical"/>

      <el-tooltip class="toolTipHover" content="保存" placement="bottom" trigger="hover">
        <span class="iconfont icon-save" @click="handleSavePageInfo"></span>
      </el-tooltip>

      <el-divider direction="vertical"/>

      <el-tooltip class="toolTipHover" content="撤销" placement="bottom" trigger="hover">
        <span class="iconfont icon-chexiao"></span>
      </el-tooltip>
      <el-tooltip class="toolTipHover" content="恢复" placement="bottom" trigger="hover">
        <span class="iconfont icon-qianjin"></span>
      </el-tooltip>

      <el-divider direction="vertical"/>

      <el-tooltip class="toolTipHover" content="清除画布" placement="bottom" trigger="hover">
        <span class="iconfont icon-qingchu" @click.native="handleClearComp"></span>
      </el-tooltip>
      <el-divider direction="vertical"/>

      <el-tooltip class="toolTipHover" content="过滤" placement="bottom" trigger="hover">
        <span class="iconfont icon-guolv"></span>
      </el-tooltip>
      <el-tooltip class="toolTipHover" content="工具箱" placement="bottom" trigger="hover">
          <span class="iconfont icon-gongjuxiang" :class="selectedToolBar?'':'no-active'"
                @click.native="handleToolBarChange"></span>
      </el-tooltip>
    </div>
    <div class="center-header">
      <span class="iconfont icon-gongjuxiang"></span>- s
    </div>
    <div class="right-header">
      <el-tooltip class="toolTipHover" content="预览" placement="bottom" trigger="hover">
        <span class="iconfont icon-preview1" @click="handlePreview"></span>
      </el-tooltip>
      <el-tooltip class="toolTipHover" content="发布" placement="bottom" trigger="hover">
        <span class="iconfont icon-fabu" @click="handlePublish"></span>
      </el-tooltip>
      <el-tooltip class="toolTipHover" content="帮助文档" placement="bottom" trigger="hover">
        <span class="iconfont icon-bangzhu"></span>
      </el-tooltip>
      <el-tooltip class="toolTipHover" content="配置栏" placement="bottom" trigger="hover">
        <span class="iconfont icon-youce" :class="selectedConfig?'':'no-active'" @click="handleConfigChange"></span>
      </el-tooltip>
    </div>
  </el-header>
</template>

<script>
import { computed, defineComponent, onMounted } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import { publishPage } from "../../../service/project";
import { ElMessage, ElMessageBox } from "element-plus";

export default defineComponent({
  name: "design-header",
  components: {},
  setup() {
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    const selectedTree = computed(() => store.state.design.selectedTree);
    const selectedLib = computed(() => store.state.design.selectedLib);
    const showContent = computed(() => store.state.design.showContent);
    const selectedConfig = computed(() => store.state.design.selectedConfig);
    const selectedToolBar = computed(() => store.state.design.selectToolBar);
    const getPanelOffsetX = computed(() => store.getters["design/getPanelOffsetX"]);
    const getPanelOffsetY = computed(() => store.getters["design/getPanelOffsetY"]);
    const handleTreeChange = () => {
      store.commit("design/SET_SelectedTree");
      handleAutoSize();
    };
    const handleLibChange = () => {
      store.commit("design/SET_SelectedLib");
      handleAutoSize();
    };
    const handleConfigChange = () => {
      store.commit("design/SET_SelectedConfig");
      handleAutoSize();
    };
    const handleToolBarChange = () => {
      store.commit("design/SET_SelectedToolBar");
      handleAutoSize();
    };
    const handleAutoSize = () => {
      store.dispatch("design/autoCanvasScale", {
        offsetX: getPanelOffsetX.value,
        offsetY: getPanelOffsetY.value
      });
    };
    const handlePreview = () => {
      let routeData = router.resolve({
        name: "Preview",
        params: { screenId: route.params.id, }
      });
      window.open(routeData.href, "_blank");
    };
    const handlePublish = () => {
      let id = route.params.id;
      const page_id = parseInt(id.split("PN")[1], 16);
      ElMessageBox.confirm(
          `你确定发布当前页面？`,
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      ).then(() => {
        publishPage({ page_id }).then(() => {
          ElMessage({
            type: "success",
            message: "发布页面成功"
          });
        }).catch(err => {
          ElMessage.error(err.message);
        });
      });
    };
    const handleClearComp = () => {
      ElMessageBox.confirm(
          `你确定清除所有组件？`,
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      ).then(() => {
        store.commit("design/CLEAR_COMP");
        store.commit("design/addSnapshot");
      });
    };
    const handleSavePageInfo = () => {
      let page_url = route.params.id;
      if (page_url) {
        store.dispatch("design/saveScreen", page_url).then(res => {
          ElMessage({
            type: "success",
            message: "保存成功"
          });
        });
      }
    };
    onMounted(() => {
    });
    return {
      selectedTree,
      selectedLib,
      showContent,
      selectedConfig,
      selectedToolBar,
      getPanelOffsetX,
      getPanelOffsetY,
      handleTreeChange,
      handleConfigChange,
      handleLibChange,
      handleToolBarChange,
      handleClearComp,
      handleAutoSize,
      handleSavePageInfo,
      handlePreview,
      handlePublish,
    };
  }
});
</script>

<style scoped lang="less">
@import "./../../../style/page/design.less";
</style>
